<template>
  <a-layout>
    <a-layout-header id="header">
      <div class="header-content">
        <div>{{ headerTitle.mapType + ' ' + headerTitle.mapEg }}</div>
        <div class="header-right">
          <div @click="runCode()" class="header-btn">点击运行</div>
        </div>
      </div>
    </a-layout-header>
    <a-layout class="center-content">
      <a-layout-sider class="sider">
        <a-menu mode="inline" v-for="item in mapApiList" :key="item.id">
          <a-sub-menu>
            <span slot="title">
              <a-icon type="global" />
              <span>{{ item.name }}</span>
            </span>
            <a-menu-item
              :title="eg.egName"
              v-for="(eg, index) in item.source"
              :key="index"
              @click="chooseItem(item, eg)"
              >{{ eg.egName }}</a-menu-item
            >
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content>
        <a-row type="flex" class="code-show">
          <a-col :span="12">
            <textarea ref="mycode" v-model="code"></textarea>
          </a-col>
          <a-col :span="12">
            <iframe id="iframeId" frameborder="0" scrolling="no"></iframe>
          </a-col>
        </a-row>
      </a-layout-content>
    </a-layout>
    <a-layout-footer id="footer">Footer</a-layout-footer>
  </a-layout>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'

import * as CodeMirror from 'codemirror/lib/codemirror'

require('codemirror/addon/edit/matchbrackets')
require('codemirror/addon/edit/closetag.js')
require('codemirror/addon/edit/closebrackets.js')
require('codemirror/addon/selection/active-line')
require('codemirror/mode/javascript/javascript.js')
require('codemirror/mode/htmlmixed/htmlmixed.js')
require('codemirror/mode/css/css.js')
require('codemirror/addon/hint/show-hint')
require('codemirror/addon/hint/html-hint')
require('codemirror/addon/hint/css-hint')

export default {
  components: {},
  data() {
    //这里存放数据
    return {
      firstShowUrl: '/assets/html/test.html',
      codeMirrorOption: {
        mode: 'htmlmixed',
        indentWithTabs: true,
        smartIndent: false,
        addModeClass: true,
        lineNumbers: true,
        matchBrackets: true,
        scrollbarStyle: null,
        line: true,
        lineWrapping: true, // 自动换行
        styleActiveLine: true, // 当前行背景高亮
        indentUnit: 4, // 缩进单位为4
        extraKeys: { Ctrl: 'autocomplete' }, //自定义快捷键
      },
      code: '//按Ctrl键进行代码提示',
      headerTitle: {},
      mapApiList: {},
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$axios.get('/assets/json/mapEGList.json').then((list) => {
      this.mapApiList = list.data.mapEGlist
      this.headerTitle = {
        mapType: this.mapApiList[0].name,
        mapEg: this.mapApiList[0].source[0].egName,
      }
    })

    this.getHtmlContent(this.firstShowUrl).then(() => {
      this.initCodeMirror()
      this.getIframe('iframeId').srcdoc = this.code
    })
  },
  //方法集合
  methods: {
    chooseItem(item, eg) {
      this.headerTitle = { mapType: item.name, mapEg: eg.egName }
      this.getHtmlContent(eg.src).then(() => {
        this.editor.setValue(this.code)
        this.runCode()
      })
    },
    // 编辑器初始化
    initCodeMirror() {
      this.editor = CodeMirror.fromTextArea(
        this.$refs.mycode,
        this.codeMirrorOption
      )
      // 支持双向绑定
      this.editor.on('change', (coder) => {
        this.code = coder.getValue()
      })
    },
    runCode() {
      this.getIframe('iframeId').srcdoc = this.code
      // this.frameDoc.contentDocument.open()
      // this.frameDoc.contentDocument.write(this.code)
      // this.frameDoc.contentDocument.close()
    },
    // 获取ifrme
    getIframe(id) {
      return document.getElementById(id) //document对象
    },
    // 点击请求获取HTML内容
    async getHtmlContent(addressUrl) {
      await this.$axios.get(addressUrl).then((res) => {
        this.code = res.data
      })
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类

#header {
  background: url('/assets/imgs/mapapidemo/purple-blue.png') no-repeat top
      center,
    linear-gradient(to right, #502070 0%, #2f3c90 100%);

  font-size: 25px;
  color: #fff;
  .header-content {
    display: flex;
    justify-content: space-between;
    .header-right {
      display: flex;
      align-items: center;
      .header-btn {
        cursor: pointer;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        border-radius: 7px;
        padding: 0 12px;
        background: #0079c1;
      }
      .header-btn:hover {
        background: #005e95;
      }
    }
  }
}
.sider {
  width: 500px;
  background: #e8e8e8;
}
.center-content {
  height: 800px;
}
.code-show {
  height: 800px;
}
#iframeId {
  height: 100%;
  width: 100%;
  border: none;
}
/deep/ .CodeMirror {
  height: 800px;
}

#footer {
  background-color: #624dcc;
  background-image: linear-gradient(70deg, #622bc0, #616ed7);
}
</style>
